<!--
 * @Author: your name
 * @Date: 2021-09-19 18:44:31
 * @LastEditTime: 2021-09-24 20:56:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \重构项目\briup-ej-app\src\views\Help\Help.vue
-->
<template>
  <div class="help">
    <header>
      <van-sticky>
        <van-nav-bar title="疫情可视化" />
      </van-sticky>
    </header>

    <div class="showImage">
      <img src="@/assets/baiduyiqing.jpg" alt="" />
    </div>

    <div class="showData">
      <!-- 数据的类型 -->
      <div class="dataTitle">
        <div class="title">国内疫情</div>
        <div class="detail">
          <span>数据更新至 {{time | dateFormat}}</span>
          <span>数据说明</span>
        </div>
      </div>
      <!-- 数据展示 -->
      <div class="chinaDataShow">
        <div>
          <div class="textWrap">
            <span>现有确诊</span>
            <div class="nowConfirmed" >{{ totalChina.get("nowConfirm") |strFormat }}</div>
            <div class="yesDay">较昨日<span>+47</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>无症状</span>
            <div class="nowConfirmed" style="color: #e86d48;">{{ totalChina.get("noInfect") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #e86d48;">+0</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>现有疑似</span>
            <div class="nowConfirmed" style="color: #ec9217;">{{ totalChina.get("suspect") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #ec9217;">+2</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>现有重症</span>
            <div class="nowConfirmed" style="color: #545499;">{{ totalChina.get("nowSevere") |strFormat }}</div>
            <div class="yesDay" style="color: #545499;">较昨日<span>+30</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>累计确诊</span>
            <div class="nowConfirmed" style="color: #e83132;">{{ totalChina.get("confirm") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #e83132;">+89</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>境外输入</span>
            <div class="nowConfirmed" style="color: #476da0;">{{ totalChina.get("importedCase")  |strFormat}}</div>
            <div class="yesDay">较昨日<span style="color: #476da0;">+30</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>累计治愈</span>
            <div class="nowConfirmed" style="color: #476da0;">{{ totalChina.get("heal") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #476da0;">+39</span></div>
          </div>
        </div>
        <div>
          <div class="textWrap">
            <span>累计死亡</span>
            <div class="nowConfirmed" style="color: #4d5054;">{{ totalChina.get("dead") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #4d5054;">+0</span></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数组对象传入需要: -->
    <van-tabs v-model="active1">
      <van-tab title="现有确诊"
        ><chinaMap :dataList="chinaNowList" width = "100%"> </chinaMap
      ></van-tab>
      <van-tab title="累计确诊"
        ><chinaMap :dataList="chinaList" width = "100%"> </chinaMap
      ></van-tab>
    </van-tabs>
        <div class="showData">
      <!-- 数据的类型 -->
      <div class="dataTitle">
        <div class="title">海外疫情</div>
        <div class="detail">
          <span>数据更新至 {{time | dateFormat}}</span>
          <span>数据说明</span>
        </div>
      </div>
      <!-- 数据展示 -->
      <div class="chinaDataShow">
        <div style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>现有确诊</span>
            <div class="nowConfirmed" >{{ total.get("nowConfirm") |strFormat }}</div>
            <div class="yesDay">较昨日<span>-42,128</span></div>
          </div>
        </div>
        <div style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>累计治愈</span>
            <div class="nowConfirmed" style="color: #10aeb5">{{ totalChina.get("heal") |strFormat }}</div>
            <div class="yesDay">较昨日<span style="color: #10aeb5">+397,103</span></div>
          </div>
        </div>
        <div  style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>现有死亡</span>
            <div class="nowConfirmed" style="color: #ec9217;">{{ total.get("dead") |strFormat}}</div>
            <div class="yesDay">较昨日<span style="color: #ec9217;">+5,352</span></div>
          </div>
        </div>
        <div  style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>累计确诊</span>
            <div class="nowConfirmed" style="color: #545499;">{{ total.get("confirm") |strFormat }}</div>
            <div class="yesDay" style="color: #545499;">较昨日<span>+30</span></div>
          </div>
        </div>
        <div  style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>治愈率</span>
            <div class="nowConfirmed" style="color: #e83132;">{{ total.get("healRate")+"%" |strFormat }}</div>
          </div>
        </div>
        <div  style="flex: 1 0 33.3%;">
          <div class="textWrap">
            <span>病死率</span>
            <div class="nowConfirmed" style="color: #476da0;">{{ total.get("deadRate")+"%" |strFormat }}</div>
          </div>
        </div>
      </div>
    </div>
    <van-tabs v-model="active2">
      <van-tab title="现有确诊"
        ><worldMap :dataList="foreignNowList" width = "100%"> </worldMap
      ></van-tab>
      <van-tab title="累计确诊"
        ><worldMap :dataList="foreignList" width = "100%"> </worldMap
      ></van-tab>
    </van-tabs>

    <div style="height: 80px"></div>
  </div>
</template>

<script>
import worldMap from "@/components/worldMap";
import chinaMap from "@/components/chinaMap";
// 导入疫情数据
import epidemic from "@/assets/epidemic";
import chinaData from "@/assets/Chinaepidemic";
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      active1: 0,
      active2: 0,
      time:new Date().getTime() 
    };
  },
  //使用组件
  components: {
    worldMap,
    chinaMap,
  },
  //method方法
  methods: {
    ...mapActions("foreignList", ["getForeignData"]),
    ...mapActions("ChinaList", ["getChinaData"]),
  },
  computed: {
    //获取绘制地图的数据
    ...mapGetters("foreignList", ["foreignList", "total", "foreignNowList"]),
    ...mapGetters("ChinaList", ["chinaList", "chinaNowList", "totalChina"]),
    ...mapState("ChinaList", ["chinaEpidemicData"]),
  },
  created() {
    this.getForeignData(epidemic);
    this.getChinaData(chinaData);
    console.log(this.time)
  },
};
</script>

<style scoped>
.showImage img {
  width: 100%;
}
.chinaDataShow {
  display: flex;
  height: 140px;
  width: 100%;
  flex-wrap: wrap;
}
.chinaDataShow div {
  flex: 1 0 25%;
  margin-bottom: 5px;
}
.showData {
  height: 220px;
  width: 100%;
  /* background-color: red; */
  padding: 0 15px;
  box-sizing: border-box;
}
.dataTitle {
  margin-bottom: 5px;
}
.dataTitle .title {
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-weight: 700;
  vertical-align: middle;
  margin-bottom: 10px;
}
.dataTitle .detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 0.8125rem;
  height: 0.8125rem;
  line-height: 0.8125rem;
}
.chinaDataShow .textWrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  
}
.chinaDataShow .textWrap span {
  font-size: 0.7375rem;
  height: 0.9375rem;
  line-height: 0.9375rem;
  margin-bottom: 0.225rem;
  color: #333;
}
.chinaDataShow .textWrap .nowConfirmed {
  color: #ff6a57;
  font-size: 1.1875rem;
  height: 1.1875rem;
  line-height: 1.1875rem;
  margin-top: 0.625rem;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.chinaDataShow .textWrap .yesDay {
  font-size: 0.8125rem;
  height: 0.8125rem;
  line-height: 0.8125rem;
  margin-top: 0.375rem;
  color: #999;
}
.chinaDataShow .textWrap .yesDay span {
  color: #ff6a57;
}
</style>